<template>
	<view>
		<view class="head-box">
			<image src="/pages/agent/static/icon/gj-index.png" mode="widthFix"></image>
			<view class="text">
				<view>管家服务宗旨</view>
				<view class="normal">为您提供最专业的的服务</view>
			</view>
		</view>
		<!-- 区域-搜索栏 -->
		<view class="ctrl-head u-flex">
			<!-- <view class="item area u-flex">
				<view class="tit u-line-1">区域</view>
				<text class="iconfont icon-xiasanjiaoxing"></text>
			</view> -->
			<view class="item search u-flex">
				<input class="tit" type="text" v-model="keywords" placeholder="搜索"/>
				<text class="iconfont icon-sousuo"></text>
			</view>
		</view>
		<!-- 管家列表 -->
		<view class="steward">
			<view class="item u-flex u-flex-1" v-for="(item,index) in list" :key="item.id">
				<view class="avatar">
					<image mode="aspectFill" :src="imgUrl(item.avatar)" />
				</view>
				<view class="u-flex u-flex-1" style="border-bottom: 1rpx solid #ddd;">
					<view class="info-wrap u-flex-1">
						<view class="top-title u-flex">
							<view class="title u-flex-1 u-flex">
								<view class="name">{{item.nickname}}</view>
								<view class="type">房联</view>
								<view class="score">{{Number(item.score)}}</view>
							</view>
						</view>
						<view class="label u-flex">
							<view v-for="(i,iindex) in item.admin_tag_ids" :key="iindex">{{i}}</view>
						</view>
					</view>
					<view class="handle u-flex">
						<image src="./static/icon/icon-chat.png" 
						@click="jump(`/pages/chat/detail?id=${item.id}&name=${item.nickname}&avatar=${item.avatar}`)"></image>
						<image src="./static/icon/icon-phone.png" @click="callPhone(item.phone)"></image>
						<image src="./static/icon/icon-shu.png" @click="jump('/pages/agent/steward-complaint?id=' + item.id)"></image>
						<image src="./static/icon/icon-comment.png" @click="jump('/pages/agent/steward-comment?id=' + item.id)"></image>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				keywords:'',
				data:[]
			}
		},
		watch:{
			keywords(keywords){
				this.list = this.data.filter(item=> !keywords || item.nickname.includes(keywords) || item.phone.includes(keywords))
			}
		},
		methods: {
			getList(){
				this.$u.post('/api/housekeeper/randIndex',{
					is_all:1
				}).then(res=>{
					this.data = res
					this.list = res
				})
			},
			callPhone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>

<style lang="scss">
	.head-box{
		background-color: $tc;border-radius: 0 0 50rpx 50rpx;position: relative;height: 333rpx;
		image{
			display: block;width: 460rpx;bottom: 40rpx;position: absolute;right: 20rpx;
		}
		.text{font-weight: bold;color: #fff;font-weight: bold;position: relative;font-size: 30rpx;padding: 100rpx 0 0 50rpx;line-height: 50rpx;
			.normal{font-weight: normal;}
		}
	}
	.ctrl-head{padding: 35rpx 30rpx;
		justify-content: space-between;
		.item{box-shadow: 0 4rpx 10rpx #ddd;border-radius: 100rpx;height: 90rpx;padding: 0 60rpx;width: 100%;
			.tit{font-weight: bold;font-size: 30rpx;color: #111;flex: 1;}
		}
	}
	
	// 管家
	.steward{
		padding: 0 30rpx;
		.item {display: flex;}
		.avatar image {width: 110rpx;flex: 0 0 110rpx;height: 110rpx;margin-right: 20rpx;border-radius: 50%;}
		.info-wrap{
			width: 0;padding: 20rpx 0;
			.top-title{
				.title{
					overflow: hidden;
					view{margin: 0 6rpx;}
					.name{font-size: 30rpx;font-weight: bold;margin-left: 0;}
					.type{background-color: #4edcc5;color: #fff;font-size: 24rpx;padding: 2rpx 10rpx;border-radius: 6rpx;white-space: nowrap;}
					.score{color: #f00;font-size: 30rpx;margin-right: 0;}
				}
			}
			.label{
				padding: 10rpx 0;flex-wrap: wrap;
				view{border: 1rpx solid #ccc;font-size: 20rpx;border-radius: 8rpx;padding: 4rpx 10rpx;margin-right: 10rpx;margin-top: 4rpx;
					&:last-child{margin-right: 0;}
				}
			}
		}
		.handle{
			image{width: 60rpx;height: 60rpx;display: block;margin: 0 8rpx;}
		}
	}
</style>
